<template>
    <div  class="cent">
        <!-- 左边 -->
       <div class="left1">
            <el-col :span="12" style="width: 200px;">
                <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :router="true"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
                <!-- 句造 -->
                <div class="line1">
                    <div class="text30">ORDER聚造</div>
                    <img src="../assets/img2/more.png" class="img1">
                </div>
                <!-- 首页 -->
                <!-- <div class="line1">
                    <div class="text31">
                        <img src="../assets/img2/head1.png" class="img2">首页
                    </div>
                </div> -->
                 <el-menu-item index="6" >
                    <img src="../assets/img2/head1.png" class="img2">
                    <span slot="title" style="margin-left: 8px;">首页</span>
                </el-menu-item>
                <el-submenu index="1">
                    <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>首页管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/index/banners">轮播图管理</el-menu-item>
                        <el-menu-item index="/index/category">分页区管理</el-menu-item>
                        <el-menu-item index="/index/recomend">为您推荐管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>商品管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1">分类管理</el-menu-item>
                        <el-menu-item index="2-2">品牌管理</el-menu-item>
                        <el-menu-item index="2-3">商品管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-menu-item index="3">
                    <span slot="title" style="margin-left: 29px; ">新闻管理</span>
                </el-menu-item>
                </el-menu>
            </el-col>

       </div>

       <!-- 右边 -->
       <div class="right">

            <!-- 上部分 -->
            <div class="above">
                <div class="text8">系统设置 / 人员管理</div>
                <img src="../assets/img2/head.png" class="img8">
                <div class="text12">超级管理员</div>

                <el-tooitip placement="bottom">
                    <div slot="content" @click="dialogFormVisible=true">修改密码</div>
                    <span class="cursor">{{ nickName }}</span>
                </el-tooitip>

                <div class="text13">hellow 大头 !</div>
                <div class="bottem">
                    <img src="../assets/img2/retun.png" class="img9">
                    <div class="text14" @click="logout">退出</div>
                </div>
                
            </div>

            <b style="margin-left: 26px;">{{ $route.meta.title }}</b>
            <router-view></router-view>

       </div>



       <div>
           <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
                 <el-form :model="form" ref="form" :rules="rules" label-width="100px">
                   <el-form-item label="原密码" prop="passWord">
                        <el-input type="password" v-model="form.passWord"></el-input>
                   </el-form-item>
                   <el-form-item label="新密码" prop="newPassWord">
                        <el-input type="password" v-model="form.newPassWord"></el-input>
                   </el-form-item>
                   <el-form-item label="确认密码" prop="reNewPassWord">
                        <el-input type="password" v-model="form.reNewPassWord"></el-input>
                   </el-form-item>
                 </el-form>
                 <div slot="footer" class="dialog-footer">
                   <el-button @click="dialogFormVisible = false">取消</el-button>
                   <el-button @click="changePassWord" type="primary">确定</el-button>
                 </div>
               </el-dialog>
       </div>

    </div>



</template>

<script>

import md5 from 'js-md5'

export default {
  name: 'index',
  components: {},
  data() {
      return {
        photo:"",
        nickName:"",
        dialogFormVisible:false,
        form:{
            passWord:"",
            newPassWord:"",
            reNewPassWord:""
        },
        value1: '',
        value2: '',
        rules:{
            passWord:[
            { required: true, message: '请输入原密码', trigger: 'blur' }
            ],
            newPassWord:[
            { required: true, message: '请输入新密码', trigger: 'blur' }
            ],
            reNewPassWord:[
                { required: true, message: '请重复输入新密码', trigger: 'blur' },
                { validator: (rule, value, callback) =>{
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.form.newPassWord) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                }, trigger: 'blur' }
            ]
      }

      };
    },

  methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      
      changePassWord(){
        this.$refs.form.validate((valid) =>{
          if(valid) {
            this.$http({
              url:'/admin/changePassWord',
              method:'POST',
              data:{
                passWord:md5(this.form.passWord),
                newPassWord:md5(this.form.newPassWord)
              }
            }).then(res => {
              if(!res.errorMsg){
                this.$message({
                  message: '修改密码成功',
                  type: 'success',
                  duration:3000
                });
                setTimeout(() =>{
                  location.href = '#/login'
                },3000)
              }
            })
          }else{
            return false;
          }
        })
      },
      
        logout(){
        this.$confirm("是否退出登陆？","提示",{
            confirmButtonText:"确定",
            cancleButtonText:"取消",
            type:"warning",
      }).then(() => {
          this.$http({
              url:"/admin/logout",
          }).then((res) => {
              if (res.errorMsg) {
                  this.$message.error(res.errorMsg);
              }else{
                  localStorage.removeItem('token')
                  localStorage.removeItem('user')
                  location.href = "/login";
              }
          })
      });
      
  },
    
  },
  created(){
      //从缓存获取登录用户信息
     let user = localStorage.getItem("user");
    if(!user){
        console.log(history,location)
        location.href = location.origin + '#login'
    }else{
        //解析为对象
        user = JSON.parse(user);
        //设置头像
        this.photo = user.avataUrl || require("../assets/img2/head.png");
        //设置昵称
        this.nickName = user.nickName || "大头"
    }
  },
  mounted(){

  }
}
</script>

<style scoped>

.cent{
    display: flex;
}
.left1{
    width: 200px;
    height: 1000px;
    background: #545c64;

}
.line1{
    display: flex;
    width: 200px;
    height: 60px;
}
.text30{
    width: 166px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 14px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: normal;
    color: #FFFFFF;
}
.img1{
    height: 14px;
    width: 14px;
    line-height: 12px;
    margin-top: 25px;
}
.img2{
    height: 18px;
    width: 18px;
    line-height: 12px;
    margin-left: 3px;
}
.img3{
    margin-left: 50px;
}
.line2{
    display: flex;
     width: 150px;
    height: 60px;
    background: #0ae96f;
}
.line3{
    display: flex;
    margin-top: 17px;
    margin-left: 27px;
     width: 150px;
    height: 50px;
    background: #ed0606;

}
.line4{
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 11px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #AAAAAA;
     width: 150px;
    height: 50px;
    /* background: #ed0606; */
    /* display: flex; */
}
.line4.flex{
    display: flex;
}
.line7{
    display: flex;
    margin-top: 22px;
    margin-left: 40px;
    width: 150px;
    height: 50px;
    background: #ed0606;
}
.text31{
    width: 150px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    /* margin-left: 80px; */
    font-size: 14px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #AAAAAA;
}
.text7{
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 11px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #ffffff;
    /* display: flex; */
}
.img7{
    width: 3px;
    height: 15px;
    background: #ed0606;
    margin-top: 18px;
}
.right{
    width: 1500px;
    height: 1000px;
    background: #EFF6FC;
}
.above{
    display: flex;
    margin-top: 33px;
}
.text8{
    width: 150px;
    height: 16px;
    font-size: 16px;
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: bold;
    color: #2C2C2C;
    margin-left: 26px;
}
table{
    background: #ffffff;
    /* width: 882px; */
    margin-left: 20px;
    margin-top: 50px;
    
}
tr{
    height: 50px;
    /* border-bottom: 5px solid #ed0606; */
}
th{
    height: 50px;
    border-bottom:#EFF6FC solid 1px;
    width: 300px;
    font-size: 14px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #7C7C7D;
}
.th{
    width: 300px;
}
td{
    padding-left: 20px;
    border-bottom:#EFF6FC solid 1px;
    width: 300px;
    font-size: 14px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    color: #7C7C7D;
}
.img8{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-top: -10px;
    margin-left: 500px;
}
.text12{
    height: 15px;
    font-size: 11px;
    font-family: MicrosoftYaHei-, MicrosoftYaHei;
    color: #EAB924;
    margin-left: 6px;
}
.text13{
    height: 15px;
    font-size: 11px;
    font-family: MicrosoftYaHei-, MicrosoftYaHei;
    color: #2C2C2C;
    margin-left: 6px;
}
.bottem{
    width: 56px;
    height: 23px;
    background: #F56C6C;
    border-radius: 11px 11px 11px 11px;
    margin-left: 10px;
    display: flex;
}
.text14{
    width: 30px;
    height: 23px;
    line-height: 23px;
    text-align: center;
    font-size: 9px;
    font-family: MicrosoftYaHei-, MicrosoftYaHei;
    font-weight: normal;
    color: #FFFFFF;
}
.img9{
    width: 11px;
    height: 11px;
    margin-top: 5px;
    margin-left: 8px;
}
.serche{
    display: flex;
    background: #ffffff;
    margin-left: 20px;
    margin-top: 50px;
    width: 965px;
    height: 50px;
}
.text18{
    height: 50px;
    line-height: 50px;
    margin-left: 30px;
}
.in{
    display: flex;
    margin-left: 30px;
    margin-top: 7px;
}
.input{
    width: 150px;
    height: 30px;
    border-radius: 5px;
    border: 2px solid #B5B3B0;
}
.day{
    margin-left: -20px;
    width: 20px;
    height: 20px;
    margin-top: 8px;
}
.inday{
    font-size: 32rpx;
    font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
    color: #B5B3B0;
}
.img10{
    width: 16px;
    height: 16px;
    margin-top: 6px;
    margin-left: 5px;
}
.serche1{
    display: flex;
    width: 58px;
    height: 25px;
    background: #63B0FF;
    border-radius: 5px;
    margin-top: 13px;
    margin-left: 25px;
}
.serche2{
    display: flex;
    width: 58px;
    height: 25px;
    background: #f56c6c;
    border-radius: 5px;
    margin-top: 13px;
    margin-left: 25px;
}
.textsd{
    width: 40px;
    height: 25px;
    line-height: 25px;
    font-size: 9px;
    font-family: MicrosoftYaHei-, MicrosoftYaHei;
    font-weight: normal;
    color: #FFFFFF;
    margin-left: 5px;
}
.down{
    width: 1000px;
    height: 33px;
    margin-top: 20px;
    /* background: #63B0FF; */
    display: flex;
}
.downleft{
    width: 152px;
    height: 33px;
    margin-left: 41px;
    background: #ffffff;
    display: flex;
}

.text15{
    width: 60px;
    height: 33px;
    font-size: 11px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #7C7C7D;
    line-height: 33px;
    text-align: center;
}
.text16{
    width: 60px;
    height: 23px;
    font-size: 11px;
    font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
    font-weight: normal;
    color: #7C7C7D;
    line-height: 23px;
    margin-left: 5px;
}
.page{
    width: 90px;
    height: 23px;
    border: 1px solid #B5B3B0;
    border-radius: 5px;
    margin-top: 5px;
    display: flex;
}
.img11{
    width: 15px;
    height: 15px;
    margin-top: 5px;
}
.downright{
    width: 266px;
    height: 33px;
    background: #ffffff;
    margin-left: 500px;
    display: flex;
}
.img12{
    width: 15px;
    height: 15px;
    margin-top: 10px;
}
.page1{
    width: 40px;
    height: 23px;
    border: 1px solid #B5B3B0;
    border-radius: 5px;
    margin-top: 5px;
}
.color{
    color: #63B0FF;
}


html,body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>
